<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #gesturepwd {
            width: 80%;
            max-width: 240px;
            height: auto;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="gesturepwd"></div>


</body>
<script src="{{ url_for('static', filename='jquery-2.1.4.min.js') }}"></script>
<script src="{{ url_for('static', filename='jquery.gesture.password.js') }}"></script>

<script>
    $("#gesturepwd").on("hasPasswd", function (e, passwd) {
        $.post("/checkAuth", {userName: null, password: passwd}, function (resultJSONObject) {
            console.log("响应成功， " + resultJSONObject)
            if (resultJSONObject.success) {
                location.reload()
            } else {
                alert(resultJSONObject.msg)
                location.reload()
            }
        }, "json");
        relodDialog();
    });
    $(document).ready(function () {
        relodDialog();
    });

    function relodDialog() {
        $("#gesturepwd").GesturePasswd({
            backgroundColor: "#252736",  //背景色
            color: "#FFFFFF",   //主要的控件颜色
            roundRadii: 25,    //大圆点的半径
            pointRadii: 6, //大圆点被选中时显示的圆心的半径
            space: 30,  //大圆点之间的间隙
            lineColor: "#00aec7",   //用户划出线条的颜色
            zindex: 100  //整个组件的css z-index属性
        });
    }
</script>
</html>
